<template>
  <div class="app-container">
    <div class="container_box">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="映射類型" prop="mapType">
                  <el-select
                  @input="$forceUpdate()"
                    style="width: 100%"
                    v-model="form.mapType"
                    placeholder="请選擇映射類型"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.subject_map_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="业务科目类型" prop="busSubjectType">
                  <el-select
                    style="width: 100%"
                    @input="$forceUpdate()"
                    v-model="form.busSubjectType"
                    placeholder="请選擇业务科目类型"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.bus_subject_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="业务科目" prop="busSubject">
                  <el-select
                    style="width: 100%"
                    @input="$forceUpdate()"
                    v-model="form.busSubject"
                    placeholder="请選擇业务科目"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.cost_scope"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="科目分類(借)" prop="JaccountSubject">
                  <el-cascader
                    style="width: 100%"
                    @input="$forceUpdate()"
                    v-model="accountSubjectArrJ"
                    :options="accountSubjectArr"
                    filterable
                    :props="{
                      expandTrigger: 'hover',
                      value: 'dictValue',
                      label: 'name',
                      children: 'children',
                    }"
                    @change="queryASHandleChangeJ"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="科目分類(貸)" prop="DaccountSubject">
                  <el-cascader
                    style="width: 100%"
                    @input="$forceUpdate()"
                    v-model="accountSubjectArrD"
                    :options="accountSubjectArr"
                    filterable
                    :props="{
                      expandTrigger: 'hover',
                      value: 'dictValue',
                      label: 'name',
                      children: 'children',
                    }"
                    @change="queryASHandleChangeD"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="備註" prop="remark">
                  <el-input     @input="$forceUpdate()" v-model="form.remark" placeholder="請輸入備註" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: center">
            <el-button type="primary"  :disabled="btn_disable" @click="submitForm('20')"
              >提 交</el-button
            >
            <!-- <el-button type="primary" @click="submitForm('10')"
                >保 存</el-button
              > -->
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
      
      <script>
import { getSubjectMap, updateSubjectMap } from "@/api/biz/subjectMap";
import bankTable from "@/components/biz/bankTable";
import {
  getAccountSubjectTree,
  getEntry,
  addEntry,
  updateEntry,
} from "@/api/biz/entry";

export default {
  name: "SubjectMapAdd",
  components: { bankTable },
  dicts: [
    "subject_map_type",
    "bus_subject_type",
    "cost_scope",

    "customer_tag",
    "customer_source",
    "industry_type",
    "cart_type",
    "sys_user_sex",
    "customer_level",
    "bank_type",
  ],
  created() {
    if (this.$route.query.id) {
      console.log(this.$route.query);
      this.getAccountSubjectTree(this.$route.query.id);
    }
  },
  activated() {
    if (this.$route.query.id) {
      console.log(this.$route.query);
      this.getAccountSubjectTree(this.$route.query.id);
    }
  },
  data() {
    return {
      btn_disable: false,
      // 表单參數
      form: {
        jAccountSubjectType: null,
        jAccountSubjectOne: null,
        jAccountSubjectTwo: null,
        dAccountSubjectType: null,
        dAccountSubjectOne: null,
        dAccountSubjectTwo: null,
      },
      // 表单校验
      rules: {},
      accountSubjectArrJ: [],
      accountSubjectArrD: [],
      accountSubjectArr: [],
    };
  },
  methods: {
    get_detail(id) {
        getSubjectMap(id).then((response) => {
        console.log(response.data);
        this.form.id =  response.data.id
        this.form.mapType =  response.data.mapType
        this.form.busSubjectType =  response.data.busSubjectType
        this.form.busSubject =  response.data.busSubject
        this.form.busSubjectName =  response.data.busSubjectName
        this.form.jAccountSubjectType =  response.data.jAccountSubjectType
        this.form.jAccountSubjectOne =  response.data.jAccountSubjectOne
        this.form.jAccountSubjectTwo =  response.data.jAccountSubjectTwo
        this.form.dAccountSubjectType =  response.data.dAccountSubjectType
        this.form.dAccountSubjectOne =  response.data.dAccountSubjectOne
        this.form.dAccountSubjectTwo =  response.data.dAccountSubjectTwo

        this.form.remark =  response.data.remark?response.data.remark:''
      // this.form.BankName = item.bankName;
        this.accountSubjectArrJ = [];
        this.accountSubjectArrD = [];
        if (this.form.jAccountSubjectType != null&&this.form.jAccountSubjectType != '') {
          this.accountSubjectArrJ.push(this.form.jAccountSubjectType);
        }
        if (this.form.jAccountSubjectOne != null&&this.form.jAccountSubjectOne != '') {
          this.accountSubjectArrJ.push(this.form.jAccountSubjectOne);
        }
        if (this.form.jAccountSubjectTwo != null&&this.form.jAccountSubjectTwo != '') {
          this.accountSubjectArrJ.push(this.form.jAccountSubjectTwo);
        }

        if (this.form.dAccountSubjectType != null&&this.form.dAccountSubjectType != '') {
          this.accountSubjectArrD.push(this.form.dAccountSubjectType);
        }
        if (this.form.dAccountSubjectOne != null&&this.form.dAccountSubjectOne != '') {
          this.accountSubjectArrD.push(this.form.dAccountSubjectOne);
        }
        if (this.form.dAccountSubjectTwo != null&&this.form.dAccountSubjectTwo != '') {
          this.accountSubjectArrD.push(this.form.dAccountSubjectTwo);
        }
        console.log( this.accountSubjectArrD);
        this.$forceUpdate()
      });
    },
    queryASHandleChangeJ(subject) {
      console.log(subject);
      this.form.jAccountSubjectType = subject[0];
      this.form.jAccountSubjectOne = subject[1];
      this.form.jAccountSubjectTwo = subject[2];
    },
    queryASHandleChangeD(subject) {
      console.log(subject);
      this.form.dAccountSubjectType = subject[0];
      this.form.dAccountSubjectOne = subject[1];
      this.form.dAccountSubjectTwo = subject[2];
    },
    getAccountSubjectTree(id) {
      getAccountSubjectTree().then((response) => {
        this.accountSubjectArr = response.data;
        this.get_detail(id);
      });
    },
    /** 提交按钮 */
    submitForm(type) {
      console.log(this.accountSubjectArr);
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btn_disable = true;
          updateSubjectMap(this.form).then((response) => {
            setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
            this.$modal.msgSuccess("新增成功");
            this.$tab.closePage().then(() => {
              // 执行結束的逻辑
              const obj = { path: "/entry/subjectMap", name: "SubjectMap" };
              this.$tab.refreshPage(obj);
            }) .catch((err) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              console.log(err);
            });
          });
        }
      });
    },
    cancel() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/entry/subjectMap", name: "SubjectMap" };
        this.$tab.refreshPage(obj);
      });
    },
  },
};
</script>
    
    <style  >
.signType thead .el-table-column--selection .cell {
  display: none;
}
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
      